﻿@page "/card/vertical-card"
@inherits SampleBaseComponent;

@using Syncfusion.Blazor.Cards
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Lists

<SampleDescription>
    <p>This sample demonstrates card rendering with horizontal layout. Based on the horizontal structure, product card is shown with detailed information.</p>
</SampleDescription>
<ActionDescription>
    <p>By default, card elements are stacked one after another vertically. You can customize the card with specific direction by adding e-card-horizontal to align elements horizontally. Using e-card-stacked class, you can split the horizontal layout with a stacked element on left or right of the card.</p>
</ActionDescription>

<div class="control-section">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6" style="text-align:center">
            <SfCard ID="MarketCard">
                <CardHeader Title="Mayumi Ohno" SubTitle="Marketing Representative" />
                <CardFooter>
                    <CardFooterContent>
                        <div class="e-email e-card-btn-txt">mayum@mail.com</div>
                    </CardFooterContent>
                    <CardFooterContent>
                        <div class="e-email e-card-btn-txt">011-232-221</div>
                    </CardFooterContent>
                    <CardFooterContent>
                        <div class="e-email e-card-btn-txt">www.mayum.com</div>
                    </CardFooterContent>
                </CardFooter>
            </SfCard>
        </div>
        <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
            <SfCard ID="RealEstate">
                <CardHeader Title="John Doe" SubTitle="Real Estate Agent" />
                <CardContent>
                    <table>
                        <tr>
                            <td>johndoe@mail.com</td>
                        </tr>
                        <tr>
                            <td>011-141-221</td>
                        </tr>
                        <tr>
                            <td>www.johndoe.com</td>
                        </tr>
                    </table>
                </CardContent>
            </SfCard>
        </div>
    </div>
</div>

<style>
    #MarketCard {
        background-image: url("../images/cards/vertical_img.png");
        background-size: cover
    }

    #RealEstate {
        background-image: url("../images/cards/vertical_img01.png");
        background-size: cover
    }

        #MarketCard .e-card-header-title,
        #RealEstate .e-card-header-title {
            font-size: 18px;
        }

    #MarketCard .e-card-sub-title {
        color: black
    }

    .e-card {
        height: 300px;
    }

    table {
        text-align: left;
        color: #fff;
    }

    #RealEstate.e-card > * {
        height: 50%;
    }

    #MarketCard.e-card > * {
        height: 50%;
    }

    .e-card-content {
        display: flex !important;
        flex-direction: column !important;
    }

    .e-card-btn {
        background-color: transparent;
    }

    #RealEstate .e-card-header-title,
    #RealEstate .e-card-sub-title {
        color: white;
    }

    .e-email {
        font-size: 10px;
    }
</style>



